<template>
	<view>
		<view :style="{'height':height + 'px'}" style="background: #FF9800;"></view>
		<view class="header_user colfff">
			<view @click="backMen">
				<image src="/static/zuo.png" mode="" style="width: 50rpx;height: 50rpx;padding-left: 30rpx;"></image>
			</view>
			<view class="rowsal" style="height: 300rpx;">
				<view class="tct">
					<image :src="image+userInfo.img" mode="" style="width: 100rpx;height: 100rpx;border-radius: 50%;background-color: #F1F1F1;"></image>
					<view class="fs26">{{userInfo.name}}</view>
				</view>
				<view class="rowsa">
					<!-- <view class="fs26">总积分：2000</view> -->
					<view class="fs26">可兑换积分：{{userInfo.integral}}</view>
					<view class="fs26"@click="integralOrders">兑换记录：0</view>
				</view>
			</view>
		</view>
		<view>
			<view class="level_user fs30 col333 bold pdBtm20 pdTop20 pdlft20">积分商城</view>
			<view style="padding: 25rpx;width: 700rpx;flex-wrap: wrap;" class="rowsb">
				<view class="container shadow_total" v-for="(item,index) in goodsList" :key="index" @click="goodsInMen(item)">
					<image :src="image+item.img" mode="" style="max-width: 330rpx;height: 330rpx;background-color: #F1F1F1;border-radius: 10rpx;"></image>
					<view style="padding: 5rpx 10rpx;">
						<view class="one_overflow fs28 col333">{{item.title}}</view>
						<view class="rowsb w100">
							<view class="fs28 col666">{{item.integral}}积分</view>
							<view class="fs28 col666">剩余：{{item.goods_num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData
	import {
		getIntegralGoods
	} from '../../../common/path.js'
	export default {
		data() {
			return {
				height: '0', //设备高德
				goodsList: [],
				image: '', //拼接
				userInfo: {} //用户表
			}
		},
		onReady() {
			this.height = uni.getSystemInfoSync().statusBarHeight == '0' ? '20' : uni.getSystemInfoSync().statusBarHeight; //设备高德
		},
		onLoad() {
			this.image = app.image
			console.log(app.userInfo);
			this.userInfo = app.userInfo
			this.getIntegralGoods()
		},
		methods: {
			backMen() {
				uni.navigateBack()
			},
			//积分列表
			getIntegralGoods() {
				this.$axios.axios('POST', getIntegralGoods, {})
					.then(res => {
						console.log('积分商城=======>', res.data);
						if (res.status == 1) {
							this.goodsList = res.data
						}
					})
			},
			//积分详情跳转
			goodsInMen(item) {
				app.integralData = item
				uni.navigateTo({
					url: 'detail?id=' + item.id
				})
			},
			integralOrders(){
				uni.navigateTo({
					url:'../../order/integralOrders'
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #FFFFFF;
	}

	.header_user {
		/* width: 750rpx;height: 400rpx; */
		/* background-repeat: no-repeat; */
		background-color: #FF9800;
		background-size: 100% 100%;
	}

	.level_user {
		border-bottom: 3rpx solid #F1F1F1;
	}

	.container {
		width: 330rpx;
		margin-top: 20rpx;
		background-color: #aaa;
		border-radius: 10rpx;
	}
</style>
